<template>
	<div>
		<el-card>
			<el-form :inline="true">
				<el-form-item>
					<el-select @change="changeSelect" v-model="value" placeholder="请选择订单状态">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-input @input="changeInput" placeholder="请输入收货人手机号" v-model="keyword"></el-input>
				</el-form-item>
			</el-form>
			<el-table v-loading="loading" :data="list.data" height="600" border>
				<el-table-column prop="time" label="日期" width="200">
					<template slot-scope="scop">
						{{$formatDate(scop.row.time)}}
					</template>
				</el-table-column>
				<el-table-column label="订单号">
					<template slot-scope="scop">
						{{scop.row.id}}
					</template>
				</el-table-column>
				<el-table-column label="订单状态" width="100">
					<template slot-scope="scop">
						{{$bookStatus( scop.row.status )  }}
					</template>
				</el-table-column>

				<el-table-column label="头像" width="60">
					<template slot-scope="scop">
						<el-image style="width: 30px; height: 30px;border-radius: 20px;" :src="scop.row.userInfo.avatar"
							fit="fit">
						</el-image>
					</template>
				</el-table-column>
				<el-table-column label="用户">
					<template slot-scope="scop">
						{{scop.row.userInfo.nickname}}
					</template>
				</el-table-column>

				<el-table-column label="商品总价">
					<template slot-scope="scop">
						{{scop.row.goodsMoney}}
					</template>
				</el-table-column>


				<el-table-column label="订单总价">
					<template slot-scope="scop">
						{{scop.row.moneyTotal}}
					</template>
				</el-table-column>


				<el-table-column fixed="right" label="操作" width="150">
					<template slot-scope="scope">
						<el-button @click="edit(scope.row)" size="small" type="primary">
							<i class="el-icon-view"></i>
						</el-button>

						<el-button @click="sent(scope.row)" size="small" type="success" v-if="scope.row.status">
							<i class="el-icon-truck"></i>
						</el-button>
					</template>
				</el-table-column>




			</el-table>
			<div style="margin-top: 20px;"></div>
			<Pagination :total="list.total " @SizeChange='SizeChange' @CurrentChange='CurrentChange' />
		</el-card>


		<el-dialog title="详细信息" :visible.sync="DetailVisible">
			<Detail :info="detail"></Detail>
		</el-dialog>

		<el-dialog title="物流信息" :visible.sync="sentVisible">
			<Sent :info="detail"></Sent>
		</el-dialog>






	</div>
</template>

<script>
	import Pagination from '@/components/pagination';
	import Sent from './components/sent.vue';
	import Detail from './components/detail';
	export default {
		components: {

			Pagination,
			Detail,
			Sent
		},
		data() {
			return {
				options: [{
					value: '',
					label: '全部'
				}, {
					value: 0,
					label: '待付款'
				}, {
					value: 1,
					label: '已付款'
				}, {
					value: 2,
					label: '待收货'
				}, {
					value: 3,
					label: '已完成'
				}],
				value: '',
				keyword: "",

				list: [],
				size: 10,
				page: 1,
				loading: true,
				detail: {},
				DetailVisible: false,
				sentVisible: false,


			}
		},
		created() {
			this.jiazai()
		},
		methods: {
			changeInput(e) {
				this.keyword = e;
				this.page = 1;
				this.jiazai()
			},
			changeSelect(e) {
				this.value = e;
				this.page = 1;
				this.jiazai()

			},
			edit(e) {
				this.axios.post("/admin/user/findBook", {
					id: e.id
				}).then(res => {
					this.DetailVisible = true;
					this.detail = res;
				}).catch(error => {

				})
			},

			sent(e) {
				this.axios.post("/admin/user/findBook", {
					id: e.id
				}).then(res => {
					this.sentVisible = true;
					this.detail = res;
				}).catch(error => {

				})
			},

			SizeChange(e) {
				this.size = e.size;
				this.page = e.page;
				this.jiazai()
			},
			CurrentChange(e) {
				this.size = e.size;
				this.page = e.page;
				this.jiazai()
			},
			jiazai() {
				this.axios.post("/admin/user/findBook", {
					page: this.page,
					size: this.size,
					status: this.value,
					keyword: this.keyword
				}).then(res => {
					this.list = res;
					this.loading = false;
				}).catch(error => {

				})
			},

		}
	}
</script>

<style>
</style>
